<template>
<div class="container-scroll df-col bcFFF">
  <head class>
    <div class="current" :class="[{'wm-bgColor':isWm,'yht-bgColor':isYht}]">
      <span class="cFFF fs14 dot df1">您当前位置：{{locationDetailInfo.address}}</span>
      <div class=" replace cFFF" @click="replaceAddress"> <span>切换</span>  <span class="right-arrow dib"></span> </div>
    </div>
    <div class="df-c pr12">
      <div class="w100p df1 search">
        <img src="../../assets/images/common/search.png" />
        <input
          class="mlr12"
          type="text"
          placeholder="请输入您要搜索的关键字"
          v-model="keyWords"
          confirm-type="search"
          @confirm="search"
        />
      </div>
      <div class="model" @click="checkModel">
        <!-- <img src='../../assets/images/common/search_list.png' alt /> -->
        <img
          :src="[listModel?'../../assets/images/common/search_map.png':'../../assets/images/common/search_list.png']"
          alt
        />
        <span>{{listModel?'地图模式':'列表模式'}}</span>
      </div>
    </div>
    <div class="map" v-if="!listModel && list.length != 0">
      <map
        id="myMap"
        style="width: 100%; height: 340px;"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :show-location="true"
        @markertap="markertap"
      ></map>
    </div>
  </head>
  <scroll-view
    class="list bcFFF"
    :scroll-y="true"
    @scrolltolower="loadMore"
    :scroll-top="scrollTop"
    @scroll="scroll"
    v-if="list.length != 0"
  >
    <div
      class="ubb_1px ptb12"
      v-for="(item,index) in list"
      :key="index"
      @click="openWebView(`/store/store?id=${item.id}&type=${item.isopen==1?'2':'4'}`)"
    >
      <div class="content">
        <div  v-if="!isWm && !isYht" class="left" >
          <!-- <ImageBox :src="item.logo"></ImageBox>  -->
          <ImageBox :src="item.logo" :defaultImgType="2"></ImageBox>
        </div>
        <div v-else-if="isWm" class="left">
          <ImageBox :src="item.logo" :defaultImgType="3"></ImageBox>
        </div>
        <div v-else-if="isYht" class="left">
          <ImageBox :src="item.logo" :defaultImgType="4"></ImageBox>
        </div>
        <div class="right df1">
          <div class="mb8">
            <span class="fs15 fb">{{item.name}}</span>
          </div>
          <div class="df df-l mb8 fww">
            <div
              v-for="(lable,_index) in item.lableList"
              class="lable fs12"
              :style="{'color':'#'+lable.color,'borderColor':'#'+lable.color}"
              :key="_index"
            >{{lable.name}}</div>
          </div>
          <div class="fs13 c666 mb8">时间：{{item.shopHours}}营业</div>
          <div class="fs13 c666 mb8">电话：{{item.phone}}</div>
          <div class="fs13 c666 mb8 df">
            <span class="df1">地址：{{item.address}}</span>
            <span class="fs13 c999 asfe" v-if="!listModel">{{item.distance}}{{item.distanceUnit}}</span>
          </div>

          <!-- 列表模式 -->
          <div class="btn" v-if="listModel">
              <span class="fs13 ub_1px mr10" :class="[{'wm-color':isWm,'yht-color':isYht}]" @click.stop="chainPhone(item.phone)">
                <img v-if="!isWm && !isYht" src="../../assets/images/common/phone.png" alt />
                <img v-else-if="isWm" src="../../assets/images/common/wanmin/phone.png" alt />
                <img v-else-if="isYht" src="../../assets/images/common/yanghetang/phone.png" alt />
                <span>电话咨询</span>
              </span>
              <span class="fs13 ub_1px" :class="[{'wm-color':isWm,'yht-color':isYht}]" @click.stop="navigation(item)">
                <img v-if="!isWm && !isYht" class="navigation" src="../../assets/images/common/location.png" alt />
                <img v-else-if="isWm" class="navigation" src="../../assets/images/common/wanmin/location.png" alt />
                <img v-else-if="isYht" class="navigation" src="../../assets/images/common/yanghetang/location.png" alt />
                <span>一键导航</span>
              </span>
            <div class="fs13 c999" v-if="listModel">{{item.distance}}{{item.distanceUnit}}</div>
          </div>
        </div>
      </div>
      <!-- 地图模式 -->
      <div class="mapBtn" :class="[{'wm-color':isWm,'yht-color':isYht}]" v-if="!listModel && item.id == showBtnId">
        <span class="fs15 ub_1px mr10 db" :class="[{'wm-color':isWm,'yht-color':isYht}]" @click.stop="chainPhone(item.phone)">
          <img v-if="!isWm && !isYht" src="../../assets/images/common/phone.png" alt />
          <img v-else-if="isWm" src="../../assets/images/common/wanmin/phone.png" alt />
          <img v-else-if="isYht" src="../../assets/images/common/yanghetang/phone.png" alt />
          <span >电话咨询</span>
        </span>
        <span class="fs15 ub_1px db" :class="[{'wm-color':isWm,'yht-color':isYht}]" @click.stop="navigation(item)">
          <img v-if="!isWm && !isYht" class="navigation" src="../../assets/images/common/location.png" alt />
          <img v-else-if="isWm" class="navigation" src="../../assets/images/common/wanmin/location.png" alt />
          <img v-else-if="isYht" class="navigation" src="../../assets/images/common/yanghetang/location.png" alt />
          <span>一键导航</span>
        </span>
      </div>
    </div>
  </scroll-view>
  <!-- 先引入图片，不然map拿不到 -->
  <div v-show="false">
    <img src="../../assets/images/common/location_mini_orange.png" alt />
    <img src="../../assets/images/common/location_green.png" alt />
    <img src="../../assets/images/common/search_map.png" alt />
    <img src="../../assets/images/common/search_list.png" alt />
    <img src="../../assets/images/default/loading_logo.jpeg" alt />
    <img src="../../assets/images/common/wanmin/location_green.png" alt />
    <img src="../../assets/images/common/yanghetang/location_green.png" alt />
  </div>
  <!-- 列表无数据时 -->
  <div class="comp-no-result" v-if="list.length == 0">
    <img v-if="!isWm && !isYht" src="../../assets/images/default/loading_logo_gary.png" alt />
    <img v-else style="width:135px;" src="../../assets/images/common/wanmin/loading_logo_gray.png" alt />
    <div class="test tx-c mt3 cCCC">暂时没有内容</div>
  </div>
</div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import ImageBox from "@/components/common/ImageBox.vue";
import page from "@/mixins/page";

export default {
  mixins: [page],
  data() {
    return {
      list: [],
      myMap: "",
      currentTab: 0,
      latitude: 23.099994,
      longitude: 113.32452,
      markers: [],
      value: "",
      listModel: true,
      keyWords: "",
      scrollTop: 0,
      showBtnId: "",
      defaultLogo: "../../assets/images/common/wanmin/loading_logo.jpeg",
      isWm: false,
      isYht: false
    };
  },
  components: {
    ImageBox
  },
  computed: {
    ...mapGetters(["location", "locationDetailInfo", "scopeId"]),
    getCompany(){
      this.isWm = wx.getStorageSync("isWm");
      if(this.isWm=="true"){
        this.isWm=true;
        console.log("isWm is " + this.isWm);
      }else{
        this.isWm = false;
      }
      this.isYht = wx.getStorageSync("isYht");
      if(this.isYht=="true"){
        this.isYht = true;
        console.log("isYht is " + this.isYht);
      }else{
        this.isYht = false;
      }
      return [this.isWm,this.isYht]
    }
  },
  watch: {
    location: {
      handler(newName, oldName) {
        this.markers = [];
        this.keyWords = "";
        this.getUserLocation();
      },
      deep: true
    },
    scopeId() {
      this.list = [];
      this.getUserLocation();
    },
  },
  created() {
    this.myMap = wx.createMapContext("myMap");
    this.getUserLocation();
    console.log(this.$myAmapFun);
  },
  methods: {
    ...mapActions(["updateAppSetting", "openRouteByWebview"]),
    scroll() {
      // 滚动时改变 scroll-top;否则在重复回到锚点时会失效
      this.scrollTop = "";
    },
    // 地图定位到用户当前位置
    getUserLocation() {
      console.log(this.location);
      this.latitude = this.location.latitude;
      this.longitude = this.location.longitude;
      this.loadFirstPage();
    },
    navigation(item) {
      wx.openLocation({
        latitude: item.latitude,
        longitude: item.longitude,
        scale: 18,
        name: item.name,
        address: item.address
      });
    },
    // 点击地图上标记点事件
    markertap(e) {
      console.log(e, e.mp.markerId);
      this.markers.forEach((v, i) => {
        v.iconPath = "../../assets/images/common/location_mini_orange.png";
        v.width = 20;
        v.height = 25;
        if (v.id == e.mp.markerId) {
          console.log(v);
          if(this.isWm){
            v.iconPath="../../assets/images/common/wanmin/location_green.png";
          }else if(this.isYht){
            v.iconPath="../../assets/images/common/yanghetang/location_green.png";
          } else{
            v.iconPath = "../../assets/images/common/location_green.png";
          }
          v.width = 40;
          v.height = 50;
          this.showBtnId = v.id;
          // 对应点数据放到第一条
          this.list.forEach((obj, index) => {
            if (obj.id == v.id) {
              this.list.splice(index, 1);
              this.list.unshift(obj);
              console.log(this.scrollTop);
              this.scrollTop = 0;
            }
          });

          this.latitude = v.latitude;
          this.longitude = v.longitude;
        }
      });
    },
    // 拨打电话
    chainPhone(number) {
      wx.makePhoneCall({
        phoneNumber: number
      });
    },
    // 切换列表模式
    checkModel() {
      this.listModel = !this.listModel;
    },
    // 更换位置
    replaceAddress() {
      wx.chooseLocation({
        success: res => {
          this.updateAppSetting({
            locationDetailInfo: res,
            addrName:this.$const.getAreaStr(res.address),
            location: { latitude: res.latitude, longitude: res.longitude }
          });
        }
      });
    },
    //  打开医药商城h5外链
    openWebView(route) {
      this.openRouteByWebview({
        route: route,
        jumpType: "push",
        sendLocation: true
      });
    },
    // 搜索店铺
    search() {
      this.markers = [];
      this.loadFirstPage(true);
    },
    customerLoadData(type) {
      let params = {
        type: 2,
        pageNo: this.page,
        pageSize: this.pageSize,
        name: this.keyWords,
        longitude: this.longitude,
        latitude: this.latitude
      };
      console.log(params, "list", this.scopeId);
      console.log(this.keyWords);
      return this.$api.nearFlagStore(params);
    },
    customerData(rs) {
      // 地图模式插入坐标点
      rs.list.forEach(v => {
        let obj = {
          id: "",
          width: 20,
          height: 25,
          iconPath: "../../assets/images/common/location_mini_orange.png",
          latitude: "",
          longitude: ""
        };
        obj.id = v.id;
        obj.latitude = v.latitude;
        obj.longitude = v.longitude;
        this.markers.push(obj);
      });
      // 地图模式第一条数据特别展示
      if (rs.list.length != 0) {
        this.showBtnId = rs.list[0] && rs.list[0].id;
         if(this.isWm){
            this.markers[0].iconPath =
           "../../assets/images/common/wanmin/location_green.png";
         }else if(this.isYht){
           this.markers[0].iconPath=
           "../../assets/images/common/yanghetang/location_green.png";
         }else{
          this.markers[0].iconPath =
          "../../assets/images/common/location_green.png";
         }
        this.markers[0].width = 40;
        this.markers[0].height = 50;
        setTimeout(() => {
          this.myMap.includePoints({
            points: this.markers
          });
        }, 100);
      }
      console.log(this.markers);

      return {
        list: rs.list || []
      };
    },
    onShow(){
      console.log(this.isWm)
    }
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
head {
  background-color: #f7f7f7;
}
.search {
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
  img {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 24px;
    top: 14px;
  }
  input {
    background-color: #fff;
    border-radius: 22px;
    height: 32px;
    padding-left: 42px;
  }
}
.mb8 {
  margin-bottom: 8rpx;
}
.model {
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
.list {
  // display: flex;
  // flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  .content {
    // min-height: 170px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 12px;
    .left {
      width: 80px;
      height: 80px;
      margin-right: 14px;
      vertical-align: super;
    }
  }
  .right {
    .fww {
      flex-wrap: wrap;
    }
    .asfe {
      align-self: flex-end;
    }
    .lable {
      border: 1px solid #000;
      margin-right: 6px;
      padding: 3px 4px;
      border-radius: 1px;
      margin-bottom: 5px;
    }
  }
  .btn,
  .mapBtn {
    color: $themeColor;
    height: 28px;
    display: flex;
    justify-content: space-between;
    padding: 8rpx 0;
    align-items: center;
    span {
      padding: 8px 6px;
      &:before {
        border-radius: 4px;
      }
      img {
        width: 14px;
        height: 14px;
        margin: 0 3px;
        vertical-align: middle;
      }
      .navigation {
        width: 12px;
        height: 14px;
      }
    }
  }
  .mapBtn {
    display: flex;
    height: 44px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 12px;
    box-sizing: border-box;
    span {
      width: 50%;
      height: 100%;
      text-align: center;
      box-sizing: border-box;
    }
  }
}
.current {
  height: 34px;
  background-color: $themeColor;
  padding: 0 12px;
  display: flex;
  align-items: center;
  .replace {
    white-space: nowrap;
    text-align: right;
    &>span{
    vertical-align: middle;
    }
  }
  .right-arrow{
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-left: 3px;
  }
}
.comp-no-result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  img {
    display: inline-block;
    width: 100px;
    height: 100px;
  }
  .test {
    white-space: nowrap;
    font-size: 16px;
  }
}
//万民主题色
.wm-color{
  color:#f39700
}
.wm-bgColor{
  background-color: #f39700
}
//养和堂主题色
.yht-color{
  color:#159547
}
.yht-bgColor{
  background-color: #159547
}
</style>
